<template>
	<view>
		<ul style="display: flex;height: 80rpx;" class="header">
			<li style="flex-grow: 1;" class="header-item">单号</li>
			<li style="flex-grow: 1;" class="header-item">用户名</li>
			<li style="flex-grow: 1;" class="header-item">状态</li>
			<li style="flex-grow: 1;" class="header-item">是否通知</li>
		</ul>
		<view v-if="reseve">
			<ul v-for="(item,index) in reseve" class="zuop-list">
					<li class="zuop-item" style="flex-grow: 1;text-align: center;">{{item.id}}</li>
					<li class="zuop-item" style="flex-grow: 1;text-align: center;">{{item.username}}</li>
					<li class="zuop-item" style="flex-grow: 1;text-align: center;color: blue;" @click="toggle('center',item)">{{item.state}}</li>
					<li class="zuop-item" style="flex-grow: 1;text-align: center;" v-if="!item.notice">是</li>
					<li class="zuop-item" style="flex-grow: 1;text-align: center;color: orangered" v-else>否</li>
			</ul>
		</view>
		<view v-if="zuop">
			<ul v-for="(item,index) in zuop" class="zuop-list">
					<li class="zuop-item" style="flex-grow: 1;text-align: center;">{{item.id}}</li>
					<li class="zuop-item" style="flex-grow: 1;text-align: center;">{{item.target}}</li>
					<li class="zuop-item" style="flex-grow: 1;text-align: center;color: blue;" @click="toggleS('center',item)">{{item.state}}</li>
					<li class="zuop-item" style="flex-grow: 1;text-align: center;" v-if="!item.notice">是</li>
					<li class="zuop-item" style="flex-grow: 1;text-align: center;color: orangered" v-else>否</li>
			</ul>
		</view>
		<uni-popup ref="popup" background-color="#fff" :mask-click="false">
						<view class="popup-content">
							<text class="text">单号:<text style="color: darkgray;">{{items.id}}</text></text><br/>
							<text class="text">预约对象<text style="color: darkgray;">{{items.username}}</text></text><br/>
							<view style="display: flex;margin-top: 60px;">
								<button @click="isHave()">完成</button>
								<button @click="close">关闭</button>
							</view>
					    </view>
		</uni-popup>
		<uni-popup ref="popups" background-color="#fff" :mask-click="false">
						<view class="popup-content">
							<text class="text">单号:<text style="color: darkgray;">{{items.id}}</text></text><br/>
							<text class="text">预约对象<text style="color: darkgray;">{{items.target}}</text></text><br/>
							<text class="text">手机号<text style="color: darkgray;">{{items.phone}}</text></text><br/>
							<view class="rating-review">
							  <!-- Rating Section -->
							  <view class="rating-section">
							    <text class="label">评分:</text>
							    <uni-rate v-model="rating" max="5" color="#e5e5e5" active-color="#ffd700"/>
							  </view>
							  <view class="comment-section">
							    <text class="label">评价:</text>
							    <input 
							       v-model="comment" 
							       placeholder="请输入您的评价" 
							       :maxlength="200" 
							       auto-height 
							       :focus="true"
							       class="textarea" 
							     />
								</view>
							  </view>
							<view style="display: flex;margin-top: 60px;">
								<button class="submit-button" @click="submitReview">提交</button>
								<button @click="close">关闭</button>
							</view>
					    </view>
		</uni-popup>
	</view>
</template>

<script>
	import {getReserve,getReserve2,isCamera,reserve,isHave,Evaluate} from "@/api/reserve.js"
	import moment from '@/common/moment';
	export default {
		components: {},
		data() {
			return {
				reseve:[],
				zuop:[],
				msg:'',
				items:{},
				rating: 0,        // Holds the star rating
				comment: '',      // Holds the user's comment
			}
		},
		onLoad() {
			this.initData();
			console.log()
		},
		methods: {
			 async submitReview() {
			      if (!this.rating) {
			        uni.showToast({ title: '请给出评分', icon: 'none' });
			        return;
			      }
			      if (!this.comment.trim()) {
			        uni.showToast({ title: '请填写评价内容', icon: 'none' });
			        return;
			      }
				 const now = new Date();
				 const utcOffset = now.getTimezoneOffset() * 60000; // 获取 UTC 时间与本地时间之间的时差，单位为毫秒
				 const beijingTime = new Date(now.getTime() + utcOffset + 8 * 3600000); // 东八区时间比 UTC 时间快 8 小时
				 const data={
					 "username":this.$store.state.username,
					 "target":this.items.target,
					 "comment":this.comment,
					 "grade":this.rating*2,
					 "time":Math.floor(beijingTime.getTime()/1000)
				 } 
				 const response=((await Evaluate(data)).data);
				 console.log(response)
				 if(response.code===1){
					 uni.showToast({ title: response.msg, icon: 'success' });
					 this.items.state="待评价"
					 await isHave(this.items);
				 }else{
					 uni.showToast({ title: response.msg, icon: 'error' });
				 }
			      this.rating = 0;
			      this.comment = '';
				  this.close();
			    },
			// 数据初始化
			async initData() {
				const response=await(reserve(this.$store.state.username));
				const res = await getReserve2(this.$store.state.username);
				this.zuop=res.data.data;
				this.reseve=response.data.data
				console.log(response.data);
			},
			back() {
				if (this.drawer) {
					this.closeDrawer()
				} else {
					this.$mRouter.back();
				}
			},
				toggle(type,data) {
				this.items=data;
				this.$refs.popup.open(type);
         },
		 async isHave(){
			this.items.state="待评价"
			const response=(await isHave(this.items)).data;
			if(response.code===1){
				uni.showToast({
					title:response.msg,
					icon:'success'
				})
			}else{
				uni.showToast({
					title:response.msg,
					icon:'error'
				})
			}
			this.close();
		 },
		 toggleS(type,data){
			 this.$refs.popups.open(type);
			 this.items=data;
		 },
		 close(){
			 this.$refs.popup.close();
			 this.$refs.popups.close();
		 }
	}
	}
</script>

<style>
	.popup-content {
			@include flex;
			align-items: center;
			justify-content: center;
			width: auto;
			padding: 15px;
			height: 200px;
			background-color: #fff;
		}
		.text{
			flex-wrap: wrap;
		}
	.header {
	  display: flex;
	  align-items: center;
	  height: 80rpx; /* If `rpx` isn't supported, consider switching to another unit */
	  background-color: #f1f1f1; /* Light background color */
	  padding: 10px;
	  border-radius: 8px;
	  font-weight: bold;
	  margin-bottom: 10px;
	  list-style: none;
	}
	
	.header-item {
	  flex-grow: 1;
	  text-align: center;
	  font-size: 16px;
	  color: #333;
	}
	
	.zuop-list {
	  list-style: none;
	  display: flex;
	  align-items: center;
	  padding: 10px;
	  border-bottom: 1px solid #ddd;
	}
	
	.zuop-item {
	  flex-grow: 1;
	  text-align: center;
	  font-size: 16px;
	}
	
	.state {
	  color: blue;
	}
	
	.notice {
	  color: black;
	}
	
	.not-notice {
	  color: orangered;
	}
	
	.zuop-list:hover {
	  background-color: #f9f9f9; /* Light gray on hover */
	}
	.popup-content {
	  padding: 20px;
	  border-radius: 8px;
	  background-color: #ffffff;
	  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
	  text-align: left; /* Aligns text to the left */
	}
	
	.text {
	  font-size: 16px;
	  font-weight: bold;
	  margin: 10px 0;
	  color: #333;
	}
	
	.text text {
	  color: darkgray;
	}
	
	.button-container {
	  display: flex;
	  justify-content: space-between; /* Ensures buttons are spaced out */
	  margin-top: 20px;
	}
	
	button {
	  flex: 1; /* Ensures buttons take up equal space */
	  margin: 0 5px; /* Adds some space between buttons */
	  padding: 10px 20px;
	  font-size: 14px;
	  color: #ffffff;
	  border: none;
	  border-radius: 5px;
	  cursor: pointer;
	  outline: none;
	  transition: background-color 0.3s;
		 display: flex;
		 justify-content: center;
		 align-items: center;
	}
	
	button:first-of-type {
	  background-color: #28a745; /* Green for "Completed" */
	}
	
	button:first-of-type:hover {
	  background-color: #218838;
	}
	
	button:last-of-type {
	  background-color: #dc3545; /* Red for "Close" */
	}
	
	button:last-of-type:hover {
	  background-color: #c82333;
	}



</style>